<template>
  <div>
    <el-dialog v-if="inputpwd" v-el-drag-dialog :visible.sync="dVisible" :append-to-body="true" :close-on-click-modal="false" width="600px" title="电子印章" @close="canAddFun">
      <el-form>
        <div class="el-table el-table--fit el-table--border">
          <div class="el-table__body-wrapper">
            <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
              <tbody>
                <tr>
                  <td class="tdlbl tdw17"><span class="required">*</span>印章账号</td>
                  <td class="tdcont tdw83" colspan="3">
                    <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="印章账号" rules="required">
                      <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                        <el-input v-model="sealAccount" name="sealAccount" autocomplete="off" placeholder="请输入印章账号" />
                      </el-tooltip>
                    </ValidationProvider>
                  </td>
                </tr>
                <tr>
                  <td class="tdlbl tdw17"><span class="required">*</span>印章密码</td>
                  <td class="tdcont tdw83" colspan="3">
                    <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="印章密码" rules="required">
                      <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                        <el-input v-model="sealPassword" name="sealPassword" type="password" autocomplete="off" placeholder="请输入印章密码" />
                      </el-tooltip>
                    </ValidationProvider>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button plain icon="el-icon-close" @click="canAddFun">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="listSeals">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-if="!inputpwd" v-el-drag-dialog :visible.sync="dVisible" :close-on-click-modal="false" width="840px" title="选择印章" :before-close="canAddFun">
      <el-row v-if="seals !== null">
        <el-col v-for="(o ) in seals" :key="o" :span="8">
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="'data:image/png;base64,'+o.preview" fit="fill" class="image" />
            <div style="padding: 14px;">
              <span class="title">{{ o.title }}</span>
              <div class="bottom clearfix">
                <span class="department">{{ o.department }}</span>
                <el-button type="text" class="button" @click="selSign(o)">盖 章</el-button>
              </div>
            </div>
          </el-card>

        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="24">
          <div style="height:317px;margin-top:100px;">正在加载，请稍候...</div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
const encrypt = new window.JSEncrypt()

export default {
    components: {

    },
    props: {
        inputpwd: { type: Boolean, default: true }, // 是否需要用户输入密码
        dVisible: { type: Boolean, default: false }
    },
    data() {
        return {
            sealAccount: '',
            sealPassword: '',
            seals: null,
            sealSessionId: ''
        }
    },
    computed: {

    },
    watch: {
        // dVisible(val) {
        //     if (val && !this.inputpwd) {
        //         this.listSeals()
        //     }
        // }
    },
    created() {

    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {
        listSeals() {
            let account = null
            let password = null

            new Promise((resolve, reject) => {
                if (!this.inputpwd) {
                    resolve(true)
                } else {
                    this.formValidate(() => {
                        this.$http({
                            method: 'GET',
                            url: 'login/getRsaPublicKey'
                        }).then(res => {
                            if (res.code === 'success') {
                                encrypt.setPublicKey(res.body.rsaPublicKey)

                                account = encrypt.encrypt(this.sealAccount)
                                password = encrypt.encrypt(this.sealPassword)

                                resolve(true)
                            } else {
                                this.$message.error(res.message)
                                reject(res.message)
                            }
                        })
                    })
                }
            }).then(result => {
                this.inputpwd = false
                this.seals = []

                this.$http({
                    method: 'GET',
                    params: { sealAccount: account, sealPassword: password },
                    url: 'stamp/listSeals'
                }).then(response => {
                    if (response.code === 'success') {
                        this.seals = response.body.listdata
                        this.sealSessionId = response.body.sealSessionId
                        this.sealPassword = password
                    } else {
                        this.inputpwd = true

                        this.$message.error(response.message)
                    }
                })
            })
        },
        // 选择印章并确定
        selSign(seal) {
            seal.imgFileData = seal.preview
            seal.sealSessionId = this.sealSessionId
            seal.sealPassword = this.sealPassword

            this.$emit('addSucc', seal)
        },
        // 取消印章
        canAddFun() {
            this.sealPassword = ''

            this.$emit('canAddFun')
        }
    }
}
</script>

<style scoped lang="scss">
.title{
    display: block;
    text-align: left;
}
.department{
    float:left;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    margin-top: 10px;
    display: block;
  }
    /deep/ .el-image__inner{
      width:120px;
      height:120px;
    }

</style>
